<template>
    <hl-page title="邀请码" :hidden-back="false">
        <div class="content" slot="content">
            <img class="logo" src="../assets/logo.png"/>
            <div class="hl-card">
                <h1 class="label">您的邀请码</h1>
                <p class="code">{{code}}</p>
                <cube-button class="copy-btn" :data-clipboard-text="code" @click="copy" >复制</cube-button>
            </div>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import {Url} from "../utils/config";
    import CodeItem from "../components/code-item";
    import ClipboardJS from 'clipboard'


    export default {
        components: {
            CodeItem,
            HlPage
        },
        name: "in-code",
        data() {
            return {
                picker: null,
                code: ""
            }
        },
        mounted() {
            this.loadCodes();
            new ClipboardJS(".copy-btn");
        },

        methods: {
            copy() {
                this.$createToast({
                    txt: "复制成功",
                    type:'correct'
                }).show();
            },
            loadCodes() {
                let toast = this.$createToast({
                    txt: '正在加载',
                    time: 0
                });
                toast.show();
                this.$get(Url.profile + "/code").then((res) => {
                    this.code = res.data.in_code
                    toast.hide();
                }).catch((error) => {
                    toast.hide();
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .add-btn {

    }

    .logo {
        display: block;
        margin: auto;
        margin-top: 32px;
        width: 240px;
        height: auto;
    }

    .hl-card {
        margin: 32px;
        background: #fff;
        box-shadow: #e0e0e0 2px 2px 2px;
        border-radius: 5px;
        min-height: 320px;
        .label {
            font-size: 16PX;
            color: #e64e4d;
            display: block;
            padding: 16px;
            padding-top: 48px;
            text-align: center;
        }
        .code {
            font-size: 48PX;
            color: #e64e4d;
            text-align: center;
            margin-bottom: 32px;
        }
    }
</style>